<template>
  <div class="pre-archive-detail">
    <el-dialog width="60%" class="WholeScroll" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-ziliao"></i>
        <span>{{ title }}</span>
      </span>

      <div class="WholeScroll" style="max-height: 650px; overflow: auto;padding: 0 15px;">
        <el-tabs class="approve-tabs" v-model="activeName">
          <el-tab-pane label="建设单位" name="first"></el-tab-pane>
          <el-tab-pane label="监理单位" name="second"></el-tab-pane>
          <el-tab-pane label="设计单位" name="third"></el-tab-pane>
          <!-- <el-tab-pane label="中心实验室" name="fourth"></el-tab-pane> -->
          <el-tab-pane label="承包单位" name="fifth"></el-tab-pane>
          <el-tab-pane label="施工标段" name="sixth"></el-tab-pane>
        </el-tabs>
        <div class="flex-row" style="align-items: unset">
          <div class="left-box">
            <p v-for="(item,index) in textArr" @click="clickLeftText(item,index)" :key="index" :class="chooseLeftIndex==index?'chooseText':''">
              {{item.text}}
            </p>
          </div>
          <div class="right-box">
            <div class="list_wrap WholeScroll">
              <el-table :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" height="442" tooltip-effect="dark" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px">
                <el-table-column show-overflow-tooltip label="序号" type="index" width="50">
                  <template slot-scope="scope">
                    {{ scope.$index + search.pageIndex * search.pageSize + 1 }}
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="姓名" prop="name">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="手机号" prop="phone">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="身份证" prop="idCard">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="职务" prop="job">
                </el-table-column>
              </el-table>
              <el-pagination style="float: right; margin-top: 30px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.total" :current-page="search.pageIndex + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'

import addressBook from '@/api/buss/addressBook'
import msgUtil from '@/utils/msgUtil'
export default {
  name: 'address-book-detail',
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {},
      },
    },
  },

  data() {
    return {
      type: '',
      currentCompanyId: '',
      search: {
        pageIndex: 0,
        pageNo: 0,
        pageSize: 10,
        pageSum: 0,
        total: 0,
      },
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      list: [],
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      formShow: false, // 表单展示
      title: '项目通讯录',
      activeName: '',
      fileList: [],
      selectList: {}, // 所有下拉框列表的集合
      textArr: [],
      chooseLeftIndex: null,
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
    }
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.detailId = value.detailId ? value.detailId : '';//就是项目id
      this.companyId = value.companyId ? value.companyId : '';//就是建设单位ID


    },
    'activeName': {
      immediate: true,
      handler: function(val) {
        this.chooseLeftIndex = null
        this.textArr = []
        this.list = []
        this.search.total = 0
        this.search.pageIndex = 0
        this.search.pageNo = 0
        if (val == 'first') {
          this.type = '建设单位'
          this.getDeptByProjectLinkUsers()
        }
        if (val == 'second') {
          this.type = '监理单位'
          this.getAllSecondPatyBySupervisorProject()
        }
        if (val == 'third') {
          this.type = '设计单位'
          this.getAllSecondPatyByDesignProject()
        }
        if (val == 'fourth') {
          this.type = '中心实验室'
          this.getAllSecondPatyByCentralLabProject()
        }
        if (val == 'fifth') {
          this.type = '承包单位'
          this.getAllSecondPatyByContractProject()
        }
        if (val == 'sixth') {
          this.type = '施工标段'
          this.getAllSecondPatyByProjectAndSectionInfo()
        }
        //切换tab  时  调用的方法
      }
    },
  },

  mounted() {
  },
  methods: {

    getDeptByProjectLinkUsers() {
      this.textArr = []
      addressBook.getDeptByProjectLinkUsers(this.detailId).then(res => {
        if (res.code == 200) {
          res.data.forEach((item, index) => {
            this.textArr.push({
              text: item.fullname,
              value: item.id,
            })
          })
          if (this.textArr.length > 0) {
            this.clickLeftText(this.textArr[0], 0)
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },




    getAllSecondPatyBySupervisorProject() {
      this.textArr = []
      addressBook.getAllSecondPatyBySupervisorProject(this.detailId).then(res => {
        if (res.code == 200) {
          res.data.forEach((item, index) => {
            this.textArr.push({
              text: item.fullname,
              value: item.id,
            })
          })
          if (this.textArr.length > 0) {
            this.clickLeftText(this.textArr[0], 0)
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },

    getAllSecondPatyByDesignProject() {
      this.textArr = []
      addressBook.getAllSecondPatyByDesignProject(this.detailId).then(res => {
        if (res.code == 200) {
          res.data.forEach((item, index) => {
            this.textArr.push({
              text: item.fullname,
              value: item.id,
            })
          })
          if (this.textArr.length > 0) {
            this.clickLeftText(this.textArr[0], 0)
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },

    getAllSecondPatyByCentralLabProject() {
      this.textArr = []
      addressBook.getAllSecondPatyByCentralLabProject(this.detailId).then(res => {
        if (res.code == 200) {
          res.data.forEach((item, index) => {
            this.textArr.push({
              text: item.fullname,
              value: item.id,
            })
          })
          if (this.textArr.length > 0) {
            this.clickLeftText(this.textArr[0], 0)
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },

    getAllSecondPatyByContractProject() {
      this.textArr = []
      addressBook.getAllSecondPatyByContractProject(this.detailId).then(res => {
        if (res.code == 200) {
          res.data.forEach((item, index) => {
            this.textArr.push({
              text: item.fullname,
              value: item.id,
            })
          })
          if (this.textArr.length > 0) {
            this.clickLeftText(this.textArr[0], 0)
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },

    getAllSecondPatyByProjectAndSectionInfo() {
      this.textArr = []
      addressBook.getAllSecondPatyByProjectAndSectionInfo(this.detailId).then(res => {
        if (res.code == 200) {
          res.data.forEach((item, index) => {
            this.textArr.push({
              text: item.fullname,
              value: item.id,
            })
          })
          if (this.textArr.length > 0) {
            this.clickLeftText(this.textArr[0], 0)
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },


    handleClickDeal() {
      this.textArr = []
      this.list = []
      this.chooseLeftIndex = null
      this.currentCompanyId = ''
      this.type = ''
      this.activeName = ''
      this.formShow = false
      this.search.total = 0
      this.search.pageIndex = 0
      this.search.pageNo = 0
    },
    clickLeftText(item, index) {
      this.currentCompanyId = ''
      this.chooseLeftIndex = index
      this.currentCompanyId = item.value
      this.getList()
    },
    getList() {
      this.list = []
      let params = {
        pageNo: this.search.pageNo,
        pageIndex: this.search.pageIndex,
        companyId: this.currentCompanyId,
        type: this.type,
        projectId: this.detailId
      }
      addressBook.getUserByCompanyId(params).then(res => {
        if (res.code == 200) {
          this.list = res.data.list
          this.search.total = res.data.total
        } else {
          msgUtil.error2(res.msg)
        }
      })


    },
    // 切换列表
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.search.pageIndex = index - 1
      this.getList()
    },
  },
}
</script>

<style scoped lang="scss">
.popContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.video-remove {
  position: absolute;
  top: 40%;
  z-index: 999;
  cursor: pointer;
}

.contract-ele {
  //   width: 280px;
  width: 95%;
}

.contract-ele-long {
  //   width: 280px;
  width: 98%;
}

.formTitle {
  font-weight: bold;
  font-size: 16px;
}

.hoverTxt {
  color: #008fe0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-demo-fujian {
  width: 250px;
}

.upload-demo-zongtu {
  width: 300px;
}

.left-box {
  min-width: 200px;
  border-right: 1px #e2e8ec solid;
  padding-left: 20px;
  p {
    cursor: pointer;
  }
}
.right-box {
  width: calc(100% - 200px);
  padding-left: 15px;
}
.chooseText {
  color: #3270ef;
}
.table-iconfont-box {
  i {
    font-size: 28px;
    cursor: pointer;
  }
}
.flex-row {
  display: flex;
  align-items: center;
}
</style>
